<template>
    <!--按钮-->
    <el-button type="primary" :icon="Plus" style="margin-bottom:20px" :disabled="!categoryStore.getCategory3Id" @click="showSpuAdd">添加SPU</el-button>
    <!--表格-->
    <el-table v-loading="loading" border row-key="id" :data="spuInfoList" stripe style="width: 100%">
      <el-table-column type="index" label="序号" width="80" align="center">
        <template v-slot="{row,$index}">{{pageSize*(current -1)+ $index+1}}</template>
      </el-table-column>h
      <el-table-column prop="spuName" label="SPU名称" />
      <el-table-column prop="description" label="SPU描述"></el-table-column>
      <el-table-column label="操作">
        <template #default="{row,$index}">
          <el-button size="small" type="primary" :icon="Edit" title="修改SPU" @click="showSpuUpdate(row)"></el-button>
          <el-button size="small" type="danger" :icon="Delete" title="删除SPU" @click="deleteSpu(row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <el-pagination v-model:currentPage="current" v-model:page-size="pageSize" :page-sizes="[3,6,9]" background layout="prev, pager, next, jumper,->,total, sizes" :total="total" @size-change="getSpuInfoList(1,$event)" @current-change="getSpuInfoList()" style="text-align:center;margin-top:20px" />
  </template>
  <script lang="ts">
  export default {
    name: 'SpuList'
  }
  </script>
  <script lang="ts" setup>
  // 引入图标
  import { Plus, Edit, InfoFilled, Delete } from '@element-plus/icons-vue'
  import { ref, watch } from 'vue'
  // 引入spu相关的类型
  import type {
    SpuListModel,
    SpuModel
  } from '@/api/product/model/spuModel'
  // 引入spu列表数据的相关api接口函数
  import {
    getSpuInfoListApi,
    deleteSpuByIdApi
  } from '@/api/product/spu'
  // 引入分类的仓库
  import { useCategoryStore } from '@/stores/category'
  // 引入枚举标识数据
  import { ShowStatus } from '../types'
  import { ElMessage } from 'element-plus'
  // 加载效果的标识
  const loading = ref<boolean>(false)
  // spu对象的数组列表数据
  const spuInfoList = ref<SpuListModel>([])
  // 页码,默认是第1页
  const current = ref<number>(1)
  // 每页的条数,默认每页3条数据
  const pageSize = ref<number>(3)
  // 总条数,默认0条
  const total = ref<number>(0)
  // 获取分类的仓库
  const categoryStore = useCategoryStore()
  // 用来显示或者隐藏sku列表的对话框的标识
  const dialogVisible = ref(false)
  // 定义个spu的对象
  const spu = ref<SpuModel>()
  // 用于接收父级组件的自定义事件
  const emits = defineEmits(['setShowStatus', 'setCurrentSpuInfo'])
  
  // 定义一个方法,用来获取spu列表的数据,内部异步请求,调用接口函数
  const getSpuInfoList = async (
    page: number = current.value,
    limit: number = pageSize.value
  ) => {
    // 设置加载效果的显示
    loading.value = true
    // 重新修订current和pageSize的值
    current.value = page
    pageSize.value = limit
    const result = await getSpuInfoListApi({
      page,
      limit,
      category3Id: categoryStore.getCategory3Id as number
    })
    // console.log(result) // 检测数据是否存在
    // 存储spu列表数组数据
    spuInfoList.value = result.records
    total.value = result.total
    // 设置加载效果的隐藏
    loading.value = false
  }
  
  //监视三级分类的id，数据变化了，则发送请求
   watch(()=>categoryStore.getCategory3Id,
   (category3Id)=>{
    if(!category3Id){ //判断三级分类的id是否存在
      spuInfoList.value =[] //清空数组数据
      current.value = 1 //页码
      pageSize.value = 3 //每页的条数
      total.value =0  //总条数
      return 
    }
  //此时三级分类的id存在
  getSpuInfoList();
  },
    {immediate:true}  //立即监视的意思
  )

  // 点击添加Spu按钮的回调函数
  const showSpuAdd = () => {
    // 修改标识---修改成:ShowStatus.SPU_ADD
    emits('setShowStatus', ShowStatus.SPU_ADD)
    // 添加spu操作
    emits('setCurrentSpuInfo')
  }
  // 点击修改Spu按钮的回调函数
  const showSpuUpdate = (row: SpuModel) => {
    // 修改标识---修改成:ShowStatus.SPU_ADD
    emits('setShowStatus', ShowStatus.SPU_ADD)
    // 分发父级组件传递过来的自定义事件,同时传递过去row---spu对象数据
    emits('setCurrentSpuInfo', {
      ...row,
      spuImageList: [], // 空数组 ----spu下的图片列表数组数据
      spuSaleAttrList: [] // 空数组----spu下的销售属性列表数组数据
    })
  }
  
  // 删除spu数据
  const deleteSpu = async (spuId: number) => {
    await deleteSpuByIdApi(spuId)
    ElMessage.success('删除成功')
    getSpuInfoList()
  }
  </script>
  <style scoped>
  </style>